<template>
  <div class="hierarchy">
    <div class="title">层级结构</div>
    <el-tree
      :data="hierarchy"
      show-checkbox
      ref="tree"
      node-key="id"
      check-strictly
      style="background: rgba(0, 0, 0, 0.3); color: #ffffff"
      @check-change="checkChange"
    >
    </el-tree>
  </div>
</template>

<script lang="ts">
import { OnLoad, _SceneManager, HierarchyItem } from "@/webgl";
import { ElTree } from "element-ui/types/tree";
import Vue from "vue";
export default Vue.extend({
  mounted() {
    const self = this;
    _SceneManager.addEventListener(OnLoad, () => {
      self.hierarchy.pop();
      self.hierarchy.push(_SceneManager.getHierarchy());
      let tree = self.$refs.tree as ElTree<string, HierarchyItem>;
      setTimeout(() => {
        tree.setCheckedKeys(_SceneManager.getCurrentVisiableNodeIDS());
      }, 200);
    });
  },
  data() {
    let hierarchy: HierarchyItem[] = [];
    let checkStrictly = true;
    return { hierarchy, checkStrictly };
  },
  methods: {
    checkChange(item: HierarchyItem, state: boolean) {
      _SceneManager.setSceneNodeState(item.id, state);
    },
  },
});
</script>
<style lang="scss" scoped>
.title {
  text-align: center;
}
</style>